<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Index</title>
  <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="libs/animate.css">
  <link rel="stylesheet" href="libs/bootstrap.css">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>


<div class="containerA">
  <div class="container">
    <div class="row headRow">
      <div class="col-7">
        <a href="javascript:void(0)">干货集中营</a>
        <a href="javascript:void(0)">首页</a>
        <a href="javascript:void(0)">妹纸</a>
        <a href="javascript:void(0)">干货</a>
        <a href="javascript:void(0)">专题</a>
        <a href="javascript:void(0)">Flutter</a>
        <a href="javascript:void(0)">API</a>
        <a href="javascript:void(0)">留言</a>
        <a href="javascript:void(0)">❤新版进度❤</a>

      </div>
      <div class="col-5">
        <a href="javascript:void(0)">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16">
            <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
          </svg>
        </a>
        <a href="javascript:void(0)">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
            <path d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"/>
            <path fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z"/>
          </svg>
        </a>
        <a href="javascript:void(0)">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-check" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
            <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
            <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
          </svg>
        </a>
        <a href="javascript:void(0)">注册</a>
        <a href="javascript:void(0)">登录</a>
      </div>
    </div>
  </div>
</div>


<div class="containerB">
  <div class="container">
    <div class="row">
      <div class="col-8">

        <div id="demo" class="carousel slide" data-ride="carousel">
          <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
          </ul>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="images/banner1.jpg">
              <div class="carousel-caption">
                <h3>盘点国内那些免费好用的图床</h3>
              </div>
            </div>
            <div class="carousel-item">
              <img src="images/banner2.jpg">
              <div class="carousel-caption">
                <h3>- 春水初生，春林初盛，春风十里，不如你。</h3>
              </div>
            </div>
            <div class="carousel-item">
              <img src="images/banner3.jpg">
              <div class="carousel-caption">
                <h3>干货集中营新版更新</h3>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>

        </div>
        <div class="myTab">
            <span id="myTab1">最新</span>
            <span>妹纸</span>
            <span>推荐</span>
            <span>Android</span>
            <span>Flutter</span>
            <span>iOS</span>
            <span>前端</span>
            <span>后端</span>
            <span>App</span>
        </div>
      </div>
      <div class="col-4">
      </div>
    </div>
  </div>
</div>

<div class="containerC">
  <div class="myBack">
    <div class="QQ">
      <a href="javascript:void(0)">
        <h6>
          主页
        </h6>
      </a>
      <a href="javascript:void(0)">
        Copyright © 2015-2020 干货集中营 gank.io 沪ICP备13038357号-9
      </a>
      <hr>
      <a href="javascript:void(0)">
        合作伙伴： gank
      </a>
      <div class="QQ1">
        <a href="javascript:void(0)">
          <span>
          </span>
        </a>
        <a href="javascript:void(0)">
          <span>
          </span>
        </a>
        <a href="javascript:void(0)">
          <span>
          </span>
        </a>
        <a href="javascript:void(0)">
          <span>
          </span>
        </a>

      </div>
    </div>
  </div>
</div>


<!--<script src="libs/jquery-3.5.1.js"></script>-->
<!--<script src="libs/popper.js"></script>-->
<!--<script src="libs/bootstrap.js"></script>-->




<!--<script>-->

<!--  let girl = [-->
<!--    {-->
<!--      title: '妹纸图第96期',-->
<!--      name: '鸢媛 — 妹纸',-->
<!--      time: new Date().getFullYear() + '年',-->
<!--      picture: 'images/picture1.jpg',-->
<!--      content: '与其安慰自己平凡可贵， 不如拼尽全力活得漂亮。',-->
<!--    },-->
<!--    {-->
<!--      title: '妹纸图第95期',-->
<!--      name: '鸢媛 — 妹纸',-->
<!--      time: new Date().getFullYear() + '年',-->
<!--      picture: 'images/picture2.jpg',-->
<!--      content: '这世界总有人在笨拙地爱着你，想把全部的温柔都给你。',-->
<!--    },-->
<!--    {-->
<!--      title: '妹纸图第94期',-->
<!--      name: '鸢媛 — 妹纸',-->
<!--      time: new Date().getFullYear() + '年',-->
<!--      picture: 'images/picture3.jpg',-->
<!--      content: '陪伴本来就是这世界上最了不起的安慰。',-->
<!--    },-->
<!--    {-->
<!--      title: '妹纸图第93期',-->
<!--      name: '鸢媛 — 妹纸',-->
<!--      time: new Date().getFullYear() + '年',-->
<!--      picture: 'images/picture4.jpg',-->
<!--      content: '长不过执念，短不过善变。',-->
<!--    },-->
<!--    {-->
<!--      title: '妹纸图第92期',-->
<!--      name: '鸢媛 — 妹纸',-->
<!--      time: new Date().getFullYear() + '年',-->
<!--      picture: 'images/picture5.jpg',-->
<!--      content: '无论多么艰难的现在，终会翻篇。 朝未来大步向前吧，别丧，别止步。',-->
<!--    },-->
<!--    {-->
<!--      title: '妹纸图第91期',-->
<!--      name: '鸢媛 — 妹纸',-->
<!--      time: new Date().getFullYear() + '年',-->
<!--      picture: 'images/picture6.jpg',-->
<!--      content: '希望下一次，能喜欢上一个也喜欢自己的人。',-->
<!--    }-->
<!--  ]-->

<!--  $(function () {-->

<!--    function fGirl() {-->
<!--      $.each(girl, function (omg,item) {-->
<!--        $('.myTab').parent().append(`<div class="girl">-->
<!--                      <a href="javascript:void(0)">-->
<!--                            <span>妹纸</span>${item.title}-->
<!--                       </a>-->
<!--                      <div class="name">-->
<!--                        <div class="left">${item.name}</div>-->
<!--                        <div class="right">${item.time}</div>-->
<!--                      </div>-->
<!--                      <img src="${item.picture}">-->
<!--                      <div class="content">${item.content}</div>-->
<!--                      </div>`)-->
<!--      })-->
<!--    }-->

<!--    function fBoy() {-->
<!--      $.each(girl,function (omg,item) {-->
<!--        $('.myTab').parent().append(-->
<!--                `<div class="boy">-->
<!--                      <img src="images/boy1.jpg">-->
<!--                      <div class="boy2">-->
<!--                      <div class="boy3">-->
<!--                      <span class="recommended">推荐</span>-->
<!--                      <span>盘点那些让人惊艳的免费壁纸网站</span>-->
<!--                      </div>-->
<!--                      <div class="boy4">盘点那些让人惊艳的免费壁纸网站,方便小伙伴们写博客或者壁纸爱好者们找到自己喜欢的壁纸呦~ 如果网站打开缓慢，可以自行FQ，快去打开壁纸新大陆吧~</div>-->
<!--                      <div class="bottom">-->
<!--                      <span class="left">李金山—推荐</span>-->
<!--                      <span class="right">1年前发布</span>-->
<!--                      </div>-->
<!--                    </div>`-->
<!--        )-->
<!--      })-->
<!--    }-->

<!--    $('.myTab span').each(function (index,element) {-->
<!--      $(element).click(function () {-->
<!--        $('.girl').remove()-->
<!--        $('.boy').remove()-->
<!--        $('.myTab span').css('backgroundColor','')-->
<!--        $(element).css('backgroundColor','#2c63ff')-->
<!--        if (index < 2) {-->
<!--          fGirl()-->
<!--        } else {-->
<!--          fBoy()-->
<!--        }-->
<!--      })-->
<!--    })-->

<!--    $("#myTab1").trigger("click")-->
<!--  })-->




<!--</script>-->

</body>
</html>
